<template>
  <div class="base_swipe">
    <van-swipe
      class="my-swipe"
      :autoplay="autoplay"
      :indicator-color="indicator_color"
      :lazy-render="lazy_render"
      :show-indicators="show_indicators"
      :height="height"
      :width="width"
      :loop="loop"
    >
      <van-swipe-item
        v-for="image in images"
        :key="image"
        :class="image.picUrl ? 'van-swipe-item ML-van-swipe-item' : 'van-swipe-item'"
      >
        <router-link :to="{ path: '/songList', query: { id: image.id } }">
          <img :src="image.pic ?? image.picUrl" class="img" />
          <div v-if="image.picUrl">
            <span class="playContent">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bofang"></use>
              </svg>
              {{ handelPlayCount.playCountChange(image.playCount) }}
            </span>
            <span class="name">{{ image.name }}</span>
          </div>
        </router-link>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, getCurrentInstance } from 'vue'

const props = withDefaults(
  //第一个参数是类型
  defineProps<{
    images?: any[]
    indicator_color?: string
    lazy_render?: boolean
    show_indicators?: boolean
    autoplay?: number
    height?: number
    width?: number
    loop?: boolean
  }>(),
  //第二个参数是默认值
  {}
)
const handelPlayCount =
  getCurrentInstance()?.appContext.app.config.globalProperties.$handelPlayCount
</script>

<style scoped lang="less">
.base_swipe {
  height: 100%;
  .my-swipe {
    height: 100%;
    .ML-van-swipe-item {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding: 0 0.1rem;
      box-sizing: border-box;
      overflow: hidden;
      .img {
        border: 1px solid transparent;
        border-radius: 0.2rem;
      }
      .playContent {
        position: absolute;
        top: 0;
        left: 0.12rem;
        color: rgb(0, 0, 0);
        display: flex;
        align-items: center;
        background-color: rgb(255, 255, 255);

        .icon {
          width: 0.35rem;
          height: 0.35rem;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
      }
      .name {
        display: inline-block;
        height: 1rem;
        overflow: hidden;
        line-height: 0.5rem;
      }
    }
    .img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
</style>
